<template>
	<div class="footerBtnPadding">
		<view class="footerBtn">
			<view :style="{width:(btn1Text&&btn2Text)?'calc(50% - 4px)':'100%'}" v-if="btn1Text">
				<u-button v-if="btn1TypeDel" shape='circle' color="#FF3141"  @click="cancel">
					<text class="delText">{{btn1Text}}</text>
				</u-button>
				<u-button v-else shape='circle' color="var(--borderColor)" :plain='true' @click="cancel">
					<text class="cancelText">{{btn1Text}}</text>
				</u-button>
				
			</view>
			<view :style="{width:(btn1Text&&btn2Text)?'calc(50% - 4px)':'100%'}" v-if="btn2Text">
				<u-button shape='circle' type='info' :disabled="btn2Disabled" color="var(--subjectColor)"
					@click="confirm">
					<text class="confirmText"> {{btn2Text}}</text>
				</u-button>
			</view>


		</view>

	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			btn1Text: {
				type: String,
			},
			btn2Text: {
				type: String,
			},
			btn2Disabled: {
				type: Boolean,
			},
			btn1TypeDel:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {

			};
		},
		mounted() {
		
		},
		methods: {
			cancel() {
				this.$emit('cancel')
			},
			confirm() {
				this.$emit('confirm')
			},
		},

	}
</script>

<style lang="scss" scoped>
	.footerBtnPadding {
		background-color: var(--moduleColor);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;

		.footerBtn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 84px;
			background-color: var(--moduleColor);
			border-top: 1px solid var(--borderColor);
			padding: 16px;
			box-sizing: border-box;
			
			.delText{
				color: var(--moduleColor);
			}
			.cancelText {
				font-size: 17px;
				color: var(--subjectColor);
			}

			.confirmText {
				font-size: 17px;
				color: $uni-color-white;
			}

			.button {
				width: 167px;
			}
		}
	}
</style>